'use client';
import { getTxtNode } from '@/lib/nodeUtil';
import { MessageData, TexRes } from '@/types/interface';
import { useMemo } from 'react';
import ItemContainer from './ItemContainer';

interface Props {
	messages: MessageData;
}
const StepContainer: React.FC<Props> = ({ messages }) => {
	const list = useMemo(() => {
		return Object.keys(messages).map((key) => {
			return {
				key,
				list: messages[key].map((item) => {
					return {
						id: item.id,
						title: item.node + (item.model_name ? '-->' + item.model_name : ''),
						model: item.model_name || '',
						description: getTxtNode(
							item.content,
							item.node.includes('GenerateDocument'),
						),
					} as TexRes;
				}),
			};
		});
		// return messages;
	}, [messages]);
	return (
		<div>
			{list.map((item) => {
				return (
					<div className="step-item relative my-4 sm:my-5" key={item.key}>
						<div className="title text-lg sm:text-xl font-semibold mb-2">{item.key}</div>
                        <ItemContainer list={item.list}></ItemContainer>
                        {/* {item.list.map(val => <div className='pl-5 relative item-container' key={val.id}>{val.description}</div>)} */}
					</div>
				);
			})}
		</div>
	);
};

export default StepContainer;
